<template>
	<view class="store-pay">
		<view style="background-color: #FFFFFF;padding-top: 45rpx;">
			<view class="store-pay-input">
				<text class="store-pay-input-text">消费金额</text>
				<input class="store-pay-input-in" type="digit" placeholder="请输入金额" v-model="money" />
			</view>
			<view class="store-pay-remarks">
				<textarea class="store-pay-remarks-textarea" auto-height type="text" placeholder="添加备注说明" />
			</view>
		</view>
		<view class="store-pay-btn">
			<view class="store-pay-btn-text" :class="{gay:money == ''}" @tap="showToggle('open')">付款</view>
		</view>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="transShow"/>
		<uni-transition :duration="500" :mode-class="['slide-bottom','fade']" :styles="transfromClass" :show="transShow">
			<view class="pay-box">
				<view @tap="showToggle('close')"><close class="pay-box-close" size="32" color="#535353"></close></view>
				<view class="pay-box-title">支付方式</view>
				<view class="pay-box-cont">
				    <view class="pay-box-cont-item" @tap="choosePay(item.type)" v-for="(item,index) in payList" :key="index">
						<view class="pay-box-cont-item-info">
							<image :src="item.icon_text"></image>
							<view class="pay-box-cont-item-info-text">{{item.name}}</view>
						</view>
						<view class="pay-box-cont-item-icon">
							<image :src="paytype == item.type ? '../../../static/icons/pay-select-act.png' : '../../../static/icons/pay-select.png'"></image>
						</view>
				    </view>
				</view>
				<view class="pay-box-btn" :class="{gay:!paytype}" @tap="pushOrder">确认</view>
			</view>
		</uni-transition>
		<paymentPassword :show="payFlag" digits="6" @confirm="onConfirm" @cancel="showToggle('payFlag')"></paymentPassword>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	import md5 from '@/common/md5.js';
	export default {
		data() {
			return {
				money:'',
				modeClass:['fade'],
				transShow:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				payList:[],
				paytype:'',
				payFlag:false,
				loadData:{}
			};
		},
		methods: {
			showToggle(type){
				switch(type){
					case 'open':
						if(this.money == '') return false
						this.transShow = true
					break;
					case 'close':
						this.transShow = false
					break;
					case 'payFlag':
						this.payFlag = !this.payFlag
					break;
				}
			},
			choosePay(e){
				this.paytype = e
			},
			pushOrder(){
				let that = this
				if(!that.paytype) return false
				that.showToggle('close')
				that.payFlag = true
			},
			onConfirm(e){
				let that = this
				uni.showLoading({
					title:'支付中...',
					mask:true
				})
				let data = {
					paypwd:md5(e),
					type:that.paytype,
					seller_id:that.loadData.seller_id,
					money:that.money
				}
				that.showToggle('payFlag')
				jewel.post('member/payToSeller',data,true,function(res){
					let billdata = res.data
					setTimeout(()=>{
						uni.hideLoading()
						if(billdata.code == 0){
							uni.navigateTo({
								url:'/pages/jewel/user/store_pay_result?money='+that.money + '&seller_name=' + that.loadData.seller_name
							})
							that.money = ''
						}else{
							jewel.showToast(billdata.msg)
						}
					},1500)
				})
			}
		},
		onLoad(option) {
			let that = this
			that.loadData = option
			console.log(option.seller_name)
			uni.setNavigationBarTitle({
				title:option.seller_name
			})
			jewel.post('Payment/payList',{repay:1,action:'seller_pay'},true,function(res){
				that.payList = res.data.data
			})
			
		}
	};
</script>
<style lang="scss">
	page{
		width: 100%;
		height: 100vh !important;
		background: #f3f3f3;
	}
	.store-pay{
		&-input{
			border: 2px solid #0aac2a;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 710rpx;
			height: 178rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			margin: 0 auto;
			&-in{
				text-align: right;
				font-size: 50rpx;
				color: #000000;
				width: 450rpx;
			}
		}
		&-remarks{
			padding: 45rpx 0;
			&-textarea{
				font-size: 30rpx;
				width: 655rpx;
				margin: 0 auto;
			}
		}
		&-btn{
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 32rpx 0;
			&-text{
				background-color: #0aac2a;
				width: 696rpx;
				line-height: 98rpx;
				margin: 0 auto;
				color: #FFFFFF;
				font-size: 36rpx;
				text-align: center;
			}
		}
	}
	.pay-box{
		z-index: 10;
		background-color: #FFFFFF;
		border-radius: 15px 15px 0 0;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		left: 0;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		&-close{
			position: absolute;
			right: 26rpx;
			top: 30rpx;
			z-index: 11;
		}
		&-title{
			color: #252525;
			text-align: center;
			font-size: 38rpx;
			line-height: 122rpx;
		}
		&-btn{
			width: 636rpx;
			height: 94rpx;
			line-height: 94rpx;
			border-radius: 50px;
			margin: 0 auto;
			text-align: center;
			font-size: 40rpx;
			color: #FFFFFF;
			background-color: #0aac2a;
			margin-top: 36rpx;
		}
		&-cont{
			&-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				&-info{
					display: flex;
					align-items: center;
					image{
						width: 74rpx;
						height: 74rpx;
					}
					&-text{
						font-size: 28rpx;
						margin-left: 20rpx;
					}
				}
				&-icon{
					image{
						width: 43rpx;
						height: 43rpx;
						display: block;
					}
				}
			}
		}
	}
	.gay{
		background-color: #cccccc !important;
		box-shadow: 0 -4rpx 13rpx rgba(204,204,204,0.54);
	}
</style>
